3 WEB - Песочница многостраничное выделенное облачное онлайн пространство( вида
статических веб страниц на хостинге) содержащее множество отдельных страниц ,
(структурированных по тематикие узлов и компонентов типовых проектов интернет вещей в
которых должна изначально хранится исчерпывающая характеристика структуры и
технические данные нужные разработчику для моделирования и проектирования для узлов
микроконтроллеров и переферийных электронных устройств ,датчиков усилителей
преобразователей и пр ) .
Страницы выделяются для для создания виртуальной рабочей функциональной модели
сенсоров , различных фильтров операционных усилителей сверстаной с помощью HTML .
HTML Верстка легко позволяет неограниченно размещать в виде блоков информации в
порядке любой необходимой иерархии ,самостоятельные програмные блоки написанные на
языке javascript в текстовом формате.
Отдельные программы способны создаватся редактироватся запускатся на исполнение в
среде модуля раззработчика браузера . Их особенность в том, что можно сверстать страницу
или написать программу и сразу же увидеть результат работы. В песочнице можно написать
фрагмент кода или вести целый проект. Можно запускать командную разработку.
Необходимо отметить что професиональные универсальные много целевые Песочницы стали
массово появляться в 2010–2013 гг. Сейчас часть таких сервисов уходит от привычного
понимания песочницы как места для кодинга и развивается как сообщество веб-
разработчиков. Внутри сервиса складываются группы пользователей. Можно общаться в
Discord, размещать работы в галерее, подписываться на понравившихся разработчиков и
дизайнеров
.
Наш подход более простой и узко специализированный и предназначен
исключительно для корректировки виртуальных моделей ThinkerCad
Работа происходит прямо в браузере, не нужно ничего дополнительно
устанавливать
Вся требуемая для настройки проекта информация переносится во в входные
формы веб страниц трансформера javascript CSS -каскадные таблици стилей
деталей проекта управляемые програмно визуально отображают вид
электронных деталей соответствующих частей проекта -рисунки и схематичные
узлы принципиальных схем динамически меняются в процессе интерактивного
взаимодействия с разработчиком
говоря простым языком мы просто воспользовались языком разметки HTML чтобы использовать
его возможности создавать размечать на веб странице (теговые блоки- контейнеры) что бы в эти
блоки помещать ( фотографии , рисунки,схемы чертежи текстовые обозначения коментарии всех
электронных устройств из готорых планируется сконструировать изделие
туда же можно помещать все блоки скриптов javascript
(моделируем
симулируем)
ESP32
Песочница похожа на зоопарк скриптов ,которые как звери в клетках сидят и
ждут пока к ним обратятся через события
1
Отдельные программы способны создаватся редактироватся запускатся на исполнение в
среде модуля раззработчика браузера . Их особенность в том, что можно сверстать страницу
или написать программу и сразу же увидеть результат работы. В песочнице можно написать
фрагмент кода или вести целый проект. Можно запускать командную разработку.
. Песочницу в нашем случае хоть можно условно считать сайтом ,хранилищем содержащем
немного виртуальных
компонентов для сборки проектов с помощью проводов, модулей и
символических деталей, справочные страници включающие как технические характеристики
,так и краткие инструкции по разработке(проектированию расчетам схемотехники с
навигационными меню с поисковыми ссылками другие страницы моделирования и
проектирования для узлов микроконтроллеров
и переферийных электронных устройств
,датчиков усилителей преобразователей и пр ) .Она действительно на первый взгляд похожа
на электронную книгу
Наш подход более простой и узко специализированный и предназначен
исключительно для корректировки виртуальных моделей ThinkerCad
Работа происходит прямо в браузере, не нужно ничего дополнительно
устанавливать
Вся требуемая для настройки проекта информация переносится во в входные
формы веб страниц трансформера javascript CSS -каскадные таблици стилей
деталей проекта управляемые програмно визуально отображают вид
электронных деталей соответствующих частей проекта -рисунки и схематичные
узлы принципиальных схем динамически меняются в процессе интерактивного
взаимодействия с разработчиком
говоря простым языком мы просто воспользовались языком разметки HTML чтобы использовать
его возможности создавать размечать на веб странице (теговые блоки- контейнеры) что бы в эти
блоки помещать ( фотографии , рисунки,схемы чертежи текстовые обозначения коментарии всех
электронных устройств из готорых планируется сконструировать изделие
туда же можно помещать все блоки скриптов javascript
Страницы становятся веб макетами компонентов циклического взаимодействования с
пользователем для создания рабочей среды проектирования. IoT HTML Верстка легко
позволяет так разметить блоки сделав их похожими на само устройство виртуальная работа
с макетом которого организуется через встроенные события браузера javascript
браузерное
событие
Возмем веб-страницу со списком пустых элементов, гото вых к тому,
чтобы наш JavaScript заполнил их например схемами соединений.
Страници могут наполнятся частично стиратся
Это будит симуляция автоматического построения электронной схеме .
в процессе интераций
Можно сказать что сама ThinkerCad взаимодействует с разработчиком как песочница
так как пользователь сидит в ней и что то делает выбирает элементы соединяет
проводами пишет или исправляет код запускает симуляцию
мы не можем создать что то подбное можем лишь
попробовать с помощью браузера и javascript
имитировать некий абгрейт заменой Arduino - на
ESP32
Все эти функции позволяют нам как то мысленно ,протестировать ESP32 перед монтажом IoT
оборудования, так и интуитивно отладить, продемонстрировать и обучить тому, как
работает плата, в дополнение к тому, что они являются отличным помощником
для создания набросков более сложных кодов и тестирования быстрее и проще,
чем при неквалифицированном использовании самой физической платы.
Вы можете играючи управлять входами и выходами для
моделирования компонентов и
поведения, а также использовать сгенерированных ответов для
отслеживания потенциальных
ошибок и понимания причин их возникновения. Это очень
полезно, если вы
создаете проект и у вас возникает проблема, в которой вы не
можете
разобраться.
Напрашивается вывод что игра в песочнице незримо тренирует
мышление(происходит неявное обучение) .Инициируемые
События
по щелчку или движению мыши на странице запускают
скрипты (обработчики событий) javascript организуют некий
круговорот разных информационных сообщений. Можно
условно разделить две стадии работы с песочницей.1
Обучение
песочници-
закладка(насыщение песочници знаниями )
Поскольку в песочнице после ее заполнения скриптами
(формируется некая
условная база знаний
) Которая также
автоматически образуется после создания и ввода справочной
информации (из даташитов компонентов)
Проанализируем сказанное на примере Простым
щелчком мыши и перетаскиванием вы можете включить редактируемые блоки
команд в блок-схему
Благодаря особой миссии Браузера События на страницах сайта происходят почти
непрерывно. Загружаете
ли вы документ, нажимаете кнопку мыши, прокручиваете страницу вниз или
просто перемещаете указатель – все это для браузера события. Некоторые из
них можно наблюдать «в прямом эфире», другие происходят «за кадром». На пример, при
достижении указателя определенной области на странице может
запускаться процесс, о котором посетитель даже не догадывается.
Все события идентифицируются по типу (иногда говорят не тип события,
а имя события). Мы рассмотрим следующие из них:
load
click
mouseover
mouseout
mousemove
mousedown
mouseup
dragstart
dragover
drop
resize
focus
blur
submit
change
scroll
paste
keyup
select
mouseenter
mouseleave
orientationchange.
Событие click возникает при щелчке кнопкой мыши на элементе разметки
страницы и даже на визуально пустом месте документа. Это могут быть ссылки,
кнопки, изображения, текстовые блоки, слои или тело документа.
Событие mouseover происходит, когда указатель мыши перемещается
внутрь границ элемента.
Событие mouseout противоположно предыдущему и возникает, когда
указатель мыши покидает границы элемента.
Событие mousemove генерируется в продолжение всего времени, пока
указатель мыши перемещается над элементом.
Событие mousedown происходит при нажатии кнопки мыши, когда ее
указатель находится над элементом.
Событие mouseup возникает при отпускании кнопки мыши (при этом указа тель
должен находиться над элементом, для которого генерируется событие).
Событие dragstart происходит, когда посетитель начинает перетаскивать
элемент по странице.
Событие dragover возникает в процессе перетаскивания элемента по
странице.
Событие drop происходит в момент отпускания перетаскиваемого эле мента в
точке назначения.
Событие resize возникает при изменении размеров окна браузера.
Событие focus случается при получении элементом фокуса (например,
когда курсор будет установлен в текстовом поле).
Событие blur происходит, когда элемент теряет фокус.
Событие submit сопровождает отправку формы, например, нажатием
кнопки.
Событие change происходит на элементах <select>, <input> и <textarea>,
когда меняются их значения.
Событие scroll возникает при прокручивании страницы в окне браузера
или во фрейме.
Событие paste происходит в момент вставки содержимого буфера обмена
в элемент документа в позицию курсора (например, в одностр
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Событие click</title>
<script>
window.addEventListener("load", function()
{
document.getElementById("pic").addEventListener("click
", function()
{
if(event.target.tagName=="INPUT")
{
let a=event.target.id;
document.getElementById("im").src="anim/"+a+".jpg";
document.getElementById("im").style.border="1px solid
#000000"; }
});
}
);
</script>
</head>
<body>
<div id="pic">
<input type="button" value="Arduino" id="ard">
<input type="button" value="ESP8266" id="esp82">
<input type="button" value="ESP32" id="esp32">
<input type="button" value="Пламя" id="fl1">
<input type="button" value="Движение" id="dv1">
<br><br>
<img id="im" src="pict/net.jpg" alt="Фото">
</div>
</body>
</html>
Однако следует сказать, что изначально эти страници ничем не отличаются от обычных
статических WEB страниц на обычных сайтах, и при загрузки в браузере и при диалогах со
страницей мы можем увидить все то что поместили . у
это простой псевло симулятор, который не предлагает много
виртуальных
компонентов для сборки проектов с помощью проводов,
модулей и
символических деталей. Вместо этого вы возьмете под свой
контроль тестовый
виртуальный запуск того, как плата или модель IoT на
основеESP32 может вести себя в данной ситуации
более техническим способом.
это бесплатный образовательный инструмент, в котором
можно только получатьподсказки и в ручную создавать свои собственные
схемы (на ESP32 путем переноса из переработки алаптации готовых
проектов Ардуино),видоизмененные программы (только текстовые или
загрузив файлы Arduino),
отладочный код и моделировать интерфейсы ввода-вывода ESP32 и
взаимодействие программ.
Было бы самонадеяно и неправильно называть какой то
набор страниц со всей нужной базой доступных знаний
симулятором , если пока все это кажется бессмысленным.
Сначала нам нужно подготовить содержимое для
отображения на экране в виде многочисленных шпаргалок и
подсказок на все случаи жизни это довольно поучительно, а
со всем остальным мы разберемся потом .Вручную создавая
конструкцию никак не расчитывая на автоматическую
проверку правильности работы схемы . Прежде чем убедится
что проектируем создаем работоспособную конструкцию и
сборка мна макетных протах не приведет к выходу из строя
радиокомпонентов микросхем процессоров полезно
посмотреть кучу шпаргалок и прикинуть результат.
Один из самых перспективных и продвинутых
подходов состоит в том, чтобы заставить скрипты генериро вать
встроенный JavaScript-код, соответствующий исход ному С++скетчу .
Другой подход (который мы использовали (описывали) было ограничится
просто квалифицированными подсказками)
монтажа устройств ESP32 предполагает использование типовых
стандартных схемотехнических решений
Измерение температуры и влажности
с помощью датчика DHT11
#include "DHT.h"
#define DHTPIN 7 //пин для получения сигнала от датчика DHT11
// Раскомментируйте тип датчика, который вы используете
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
DHT dht(DHTPIN, DHTTYPE);
void setup() {
Serial.begin(9600);
dht.begin();
}
void loop() {
// Задержка перед измерениями
delay(2000);
float h = dht.readHumidity();
//чтение температуры в градусах Цельсия °С (по умолчанию)
float t = dht.readTemperature();
//чтение температуры в градусах Фаренгейта °F (isFahrenheit = true)
float f = dht.readTemperature(true);
// Проверка чтения данных
if (isnan(h) || isnan(t) || isnan(f)) {
Serial.println("Failed to read from DHT sensor!");
return;
}
// Вычисление теплового индекса в °F (по умолчанию)
float hif = dht.computeHeatIndex(f, h);
// Вычисление теплового индекса в °С (isFahreheit = false)
float hic = dht.computeHeatIndex(t, h, false);
Serial.print("Humidity: ");
Serial.print(h);
Serial.print(" %\t");
Serial.print("Temperature: ");
6
Serial.print(t);
Serial.print(" *C ");
Serial.print(f);
Serial.print(" *F\t");
Serial.print("Heat index: ");
Serial.print(hic);
Serial.print(" *C ");
Serial.print(hif);
Serial.println(" *F");
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>События drag и drop</title>
<style>
#td1 {width: 280px; height: 280px; background:
url(pict/ros1.jpg);
padding: 10px; border: 1px solid #000000;}
#td2 {width: 400px;}
#td3 {width: 280px; height: 280px; background:
url(pict/ros2.jpg);
padding: 10px; border: 1px solid #000000;}
</style>
<script>
window.addEventListener("load", function()
{
document.getElementById("im").addEventListene
r("dragstart", sta);
document.getElementById("td2").addEventListen
er("dragover", mid);
document.getElementById("td3").addEventListen
er("dragover", mid);
document.getElementById("td3").addEventListen
er("drop", fin);
});
function sta()
{
event.dataTransfer.setData("image", "im");
}
function mid()
{
event.preventDefault();
}
function fin()
{
event.preventDefault();
document.getElementById("td3").appendChild(do
cument.getElementById
("im"));
}
</script>
</head>
<body>
<table>
<tr>
<td id="td1"><img src="pict/bat.png"
draggable="true" id="im"
alt="Фото"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
</table>
</body>
</html>